<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport"
          content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no"/>
    <title>网站后台管理模版</title>
    <link rel="stylesheet" type="text/css" th:href="@{/serve/layui/css/layui.css}"/>
    <link rel="stylesheet" type="text/css" th:href="@{/serve/css/admin.css}"/>
</head>
<body>
<div class="wrap-container">
    <div class="column-content-detail">
        <form class="layui-form" action="">
            <div class="layui-form-item">
                <div class="layui-inline tool-btn">
                    <a href="/sys/user/add" class="layui-btn layui-btn-small layui-btn-normal addBtn"><i class="layui-icon">&#xe654;</i>
                    </a>
                    <button class="layui-btn layui-btn-small layui-btn-warm listOrderBtn hidden-xs"><i class="iconfont">&#xe656;</i>
                    </button>
                </div>
                <div class="layui-inline">
                    <input type="text" name="userName" placeholder="请输入昵称" autocomplete="off" class="layui-input">
                </div>
                <div class="layui-inline">
                    <input type="text" name="phonenumber" placeholder="请输入手机号" autocomplete="off" class="layui-input">
                </div>
                <!--<div class="layui-inline">
                    <select name="states" lay-filter="status">
                        <option value="">请选择一个状态</option>
                        <option value="010">显示</option>
                        <option value="021">隐藏</option>
                    </select>
                </div>-->
                <button class="layui-btn layui-btn-normal" lay-submit="search">搜索</button>
            </div>
        </form>
        <div class="layui-form" id="category-table-list">
            <table class="layui-table" lay-even lay-skin="nob">
                <colgroup>
                    <col width="50">
                    <col class="hidden-xs" width="200">
                    <col width="200">
                    <col class="hidden-xs">
                    <col class="hidden-xs">
                    <col class="hidden-xs">
                    <col class="hidden-xs" width="100">
                    <col width="150">
                </colgroup>
                <thead>
                <tr>
                    <th><input type="checkbox" name="" lay-skin="primary" lay-filter="allChoose"></th>
                    <th class="hidden-xs">昵称</th>
                    <th class="hidden-xs">性别</th>
                    <th class="hidden-xs">电话</th>
                    <th class="hidden-xs">头像</th>
                    <th class="hidden-xs">登录时间</th>
                    <th class="hidden-xs">备注</th>
                    <th>操作</th>
                </tr>
                </thead>
                <tbody>
                <tr th:each="u:${userList}" >
                    <td><input type="checkbox" name="" lay-skin="primary" data-id="1"></td>
                    <td class="hidden-xs" th:text="${u.userName}"></td>
                    <td class="hidden-xs" th:text="${u.sex}"></td>
                    <td class="hidden-xs" th:text="${u.phonenumber}"></td>
                    <td class="hidden-xs" th:text="${u.avatar}"></td>
                    <td class="hidden-xs" th:text="${#dates.format(u.loginDate, 'yyyy-MM-dd')}"></td>
                    <td class="hidden-xs" th:text="${u.remark}"></td>
                    <td>
                        <div class="layui-inline">
                            <a th:href="'/sys/user/edit/'+${u.userId}" class="layui-btn layui-btn-small layui-btn-normal  edit-btn" data-id="1"><i
                                    class="layui-icon">&#xe642;</i></a>
                            <a th:href="'/sys/user/delete/'+${u.userId}" class="layui-btn layui-btn-small layui-btn-danger del-btn" data-id="1"><i
                                    class="layui-icon">&#xe640;</i></a>
                        </div>
                    </td>
                </tr>
                </th:each>
                </tbody>
            </table>
            <!--tp分页-->
            <div class="page-wrap">
                <ul class="pagination">
                    <li class="disabled"><span>«</span></li>
                    <li class="active"><span>1</span></li>
                    <li>
                        <a href="/admin/category/index.html?page=2">2</a>
                    </li>
                    <li>
                        <a href="/admin/category/index.html?page=2">»</a>
                    </li>
                </ul>
            </div>
        </div>
    </div>
</div>
<script type="text/javascript">
    var SCOPE = {
        static: '/static',
        index: '/admin/category/index.html',
        edit: 'menu-add.html',
        updateEdit: '/admin/category/updateedit.html',
        status: '/admin/category/updatestatus.html',
        del: '/admin/category/del.html',
        listOrderAll: '/admin/category/listorderall.html'
    }
</script>
<script th:src="@{/serve/layui/layui.js}" type="text/javascript" charset="utf-8"></script>
<script>
    layui.config({
        base: './serve/js/module/'
    }).extend({
        dialog: 'dialog',
        load: 'load',
        common: 'common'
    });
    layui.use(['form', 'jquery', 'layer', 'dialog', 'common', 'element'], function () {
        var form = layui.form(),
            layer = layui.layer,
            $ = layui.jquery,
            common = layui.common,
            element = layui.element(),
            dialog = layui.dialog;

        //获取当前iframe的name值
        var iframeObj = $(window.frameElement).attr('name');
        //全选
        form.on('checkbox(allChoose)', function (data) {
            var child = $(data.elem).parents('table').find('tbody input[type="checkbox"]');
            child.each(function (index, item) {
                item.checked = data.elem.checked;
            });
            form.render('checkbox');
        });
        form.render();
        //顶部添加
        $('.addBtn').click(function () {
            //将iframeObj传递给父级窗口,执行操作完成刷新
            parent.page("菜单添加", SCOPE.add, iframeObj, w = "700px", h = "620px");
            return false;

        }).mouseenter(function () {

            dialog.tips('添加', '.addBtn');

        })
        //列表添加
        $('.add-btn').click(function () {
            //将iframeObj传递给父级窗口
            parent.page("菜单添加", SCOPE.add, iframeObj, w = "700px", h = "620px");
            return false;

        })
        //删除
        $('.del-btn').on('click', function () {
            var id = $(this).attr('data-id');
            common.del(SCOPE.del, id);
        })

        //排序
        $('.listOrderBtn').click(function () {

            common.listOrderAll(SCOPE.listOrderAll, '您确定要进行排序吗？');
            return false;

        }).mouseenter(function () {

            dialog.tips('排序', '.listOrderBtn');

        })
        //编辑栏目
        $('#category-table-list').on('click', '.edit-btn', function () {
            var That = $(this);
            var id = That.attr('data-id');
            //将iframeObj传递给父级窗口
            parent.page("菜单编辑", SCOPE.edit + "?id=" + id, iframeObj, w = "700px", h = "620px");
        })
    });
</script>
</body>

</html>